<template>
  <el-container class="home-container">
    <!--导航-->
    <el-header>
      <div>
        <div class="collapse-btn" @click="handleIsCollapse">
          <i v-if="!isCollapse" class="el-icon-s-fold"></i>
          <i v-else class="el-icon-s-unfold"></i>
        </div>
        <!-- logo盒子 -->
        <div class="logo">
          <img src="../../assets/imgs/huya.png" alt="">
          <span class="title">新冠物资管理系统</span>
        </div>
      </div>
      <!-- 登录注销等操作的盒子 -->
      <div class="operation">
        <el-dropdown @command="commandHandler">
          <span class="el-dropdown-link">
            <i><img src="../../assets/imgs/huya.png" alt=""></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="home" icon="el-icon-house">首页</el-dropdown-item>
            <el-dropdown-item command="userinfo" icon="el-icon-user">个人中心</el-dropdown-item>
            <el-dropdown-item command="settings" icon="el-icon-setting">设置</el-dropdown-item>
            <el-dropdown-item command="logout" icon="el-icon-switch-button">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <!--      右边栏菜单-->
      <el-aside :width="!isCollapse?'180px':'48px'">
        <!--        折叠缩放-->
        <!--        <span class="collapse" @click="handleIsCollapse">|||</span>-->
        <el-menu
            :collapse-transition="false"
            :collapse="isCollapse"
            router
            unique-opened
            style="border: none"
            class="el-menu-vertical-demo"
            background-color="#272c33"
            text-color="#fff"
            active-text-color="#ffd04b">
          <Menu :menuData="menusTree"></Menu>
        </el-menu>
      </el-aside>
      <!--      主体-->
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Menu from "../../components/Menu";

export default {
  components: {
    Menu
  },
  data() {
    return {
      isCollapse: false,
      menusTree: []
    }
  },
  methods: {
    commandHandler(command) {
      if (command === "logout") {
        this.$router.replace("/login");
      } else if (command === "home") {
        this.$router.push("/home");
      }
    },
    handleIsCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    getMenusTree() {
      this.getRequest("/menu/").then(resp => {
        if (resp) {
          this.menusTree = resp.data.menuTree;
        }
      });
    }
  },
  mounted() {
    this.getMenusTree();
  }
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #272c33;
  display: flex;
  padding: 0 20px 0 0;
  justify-content: space-between;

  .collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 65px;

    .el-icon-s-fold {
      //width: 32px;
      //height: 32px;
    }
  }

  .collapse-btn:hover {
    background: rgb(40, 52, 70);
  }

  .el-dropdown {
    cursor: pointer;
  }

  .logo {
    display: flex;
    align-items: center;

    .title {
      font-size: 30px;
      color: white;
      font-weight: bold;
      font-family: 华文楷体;
    }
  }
}

.el-aside {
  background-color: #272c33;

  .collapse {
    display: inline-block;
    width: 200px;
    height: 30px;
    color: white;

  }
}
.el-aside::-webkit-scrollbar {
  display: none;
}

.el-main {
  background-color: #eaedf1;
}

.el-container {
  height: 100%;
}

img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 20px;
}
</style>